<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="diagram"></div>
    <script>


        var shapes = [
            { id: "305", name: "基本特技", code: "305", sortieNumber: "6/6:00", hover: { fill: { color: "gold" } }, height: 80, x: 20, y: 170 },
            { id: "308", name: "基本特技", code: "305", sortieNumber: "6/6:00", hover: { fill: { color: "gold" } }, height: 80, x: 20, y: 350 },

            { id: "306", name: "基本特技", code: "306", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 180, y: 20 },
            { id: "312", name: "基本特技", code: "312", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 180, y: 170 },
            { id: "319", name: "基本特技", code: "319", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 180, y: 280 },
            { id: "315", name: "基本特技", code: "315", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 180, y: 420 },
            { id: "322", name: "基本特技", code: "322", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 350, y: 240 },
            { id: "340", name: "基本特技", code: "340", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 450, y: 240 },

            { id: "341", name: "基本特技", code: "341", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 650, y: 150 },
            { id: "344", name: "基本特技", code: "344", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 650, y: 350 },

            { id: "358", name: "基本特技", code: "358", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 820, y: 20 },
            { id: "359", name: "基本特技", code: "369", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 820, y: 120 },
            { id: "360", name: "基本特技", code: "360", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 950, y: 150 },
            { id: "361", name: "基本特技", code: "361", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 1100, y: 150 },

            { id: "370", name: "基本特技", code: "370", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 820, y: 240 },
            { id: "373", name: "基本特技", code: "373", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 820, y: 320 },
            { id: "374", name: "基本特技", code: "374", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 820, y: 400 },
            { id: "375", name: "基本特技", code: "375", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 820, y: 480 },
            { id: "376", name: "基本特技", code: "376", sortieNumber: "6/6:00", hover: { fill: { color: "lightblue" } }, height: 80, x: 820, y: 540 }]


        var connections = [{ from: "305", to: "306", fromConnector: "right" },
        { from: "305", to: "312", },
        { from: "305", to: "319" },
        { from: "305", to: "315" },
        { from: "308", to: "306" },
        { from: "308", to: "312" },
        { from: "308", to: "319" },
        { from: "308", to: "315" },

        { from: "312", to: "322" },
        { from: "319", to: "322" },
        { from: "306", to: "340" },
        { from: "322", to: "340" },
        { from: "315", to: "340" },

        { from: "340", to: "341" },
        { from: "340", to: "344" },

        { from: "341", to: "358" },
        { from: "341", to: "359" },
        { from: "341", to: "370" },
        { from: "341", to: "373" },
        { from: "341", to: "374" },
        { from: "341", to: "375" },
        { from: "341", to: "376" },

        { from: "344", to: "358" },
        { from: "344", to: "359" },
        { from: "344", to: "370" },
        { from: "344", to: "373" },
        { from: "344", to: "374" },
        { from: "344", to: "375" },
        { from: "344", to: "376" },

        { from: "359", to: "360" },
        { from: "360", to: "361" }]

        $("#diagram").kendoDiagram({
            shapes: shapes,
            // dataSource: new kendo.data.HierarchicalDataSource({
            //     data: shapes
            // }),
            connections: connections,
            connectionDefaults: {
                endCap: "ArrowEnd"
            },
            shapeDefaults: {
                visual: visualTemplate,
                hover: {
                    fill: {
                        color: "pink"
                    }
                }
            },
            click: function (e) {
                //console.log(e)
                if (e.item instanceof kendo.dataviz.diagram.Shape)
                    //console.log(e.item.options.content ? e.item.options.content.text : "No content.");
                    console.log(e.item.options)
                else
                    console.log("Clicked a connection.");
            },
            mouseEnter: function (e) { },
            mouseLeave: function (e) { }
        });
        function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;
            //console.log(options)
            g.append(new dataviz.diagram.TextBlock({
                text: options.name,
                x: 0,
                y: 0,
                fill: "#000"
            }));


            g.append(new dataviz.diagram.Rectangle({
                x: 0,
                y: 24,
                width: 70,
                height: 30,
                stroke: {
                    width: 0.5
                },
                fill: "#fff"
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: options.code,
                x: 20,
                y: 30,
                fill: "#000"
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: options.sortieNumber,
                x: 0,
                y: 60,
                fill: "#000"
            }));

            return g;
        }



    </script>
</body>

</html>